<template>
  <a-modal :visible="visible" title="过滤字段" @cancel="cancel" @ok="save" width="800px" :maskClosable="false" :destroyOnClose="true" okText="保存">
    <div class="filter-body">
      <div class="filter-left">
        <div class="filter-options">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 选择所有 </a-checkbox>
        </div>
        <a-divider style="margin: 8px 0" />
        <a-checkbox-group v-model:value="selectedValues" @change="onGroupChange">
          <div class="checkbox-list">
            <div v-for="field in localFields" :key="field.value" class="checkbox-item">
              <a-checkbox :value="field.value">{{ field.label }}</a-checkbox>
            </div>
          </div>
        </a-checkbox-group>
      </div>
      <div class="filter-right">
        <div class="current-selection">
          <h3 class="selection-title">当前选定的字段</h3>
          <div class="selection-name">名称</div>
          <div class="selected-fields">
            <div v-for="field in localFields" :key="field.value" class="field-item" :class="{ disabled: !selectedValues.includes(field.value) }">
              <img class="icon-drag" src="/@/assets/images/icon-drag.png" @click="handleShowFilter" alt="筛选图标" :title="'过滤设置'" />
              <span class="field-name">{{ field.label }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, PropType, ref, watch } from 'vue';
  import { Modal, Checkbox, Divider } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  interface FilterField {
    value: string;
    label: string;
    selected: boolean;
    showDetails?: boolean;
  }
  const { createMessage } = useMessage();
  export default defineComponent({
    name: 'FilterModal',
    components: {
      AModal: Modal,
      ACheckbox: Checkbox,
      ACheckboxGroup: Checkbox.Group,
      ADivider: Divider,
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      fields: {
        type: Array as PropType<FilterField[]>,
        required: true,
      },
    },
    emits: ['update:visible', 'save'],
    setup(props, { emit }) {
      const localFields = ref<FilterField[]>([]);
      const selectedValues = ref<string[]>([]);
      const indeterminate = ref(false);
      const checkAll = ref(false);

      // 更新全选状态
      const updateCheckAllStatus = () => {
        const selectedCount = selectedValues.value.length;
        const totalCount = localFields.value.length;
        checkAll.value = selectedCount === totalCount;
        indeterminate.value = selectedCount > 0 && selectedCount < totalCount;
      };

      // 更新选中的值
      const updateSelectedValues = () => {
        selectedValues.value = localFields.value.filter((field) => field.selected).map((field) => field.value);
        updateCheckAllStatus();
      };

      // 初始化和更新本地数据
      watch(
        () => props.fields,
        (newVal) => {
          localFields.value = JSON.parse(JSON.stringify(newVal));
          updateSelectedValues();
        },
        { immediate: true, deep: true }
      );

      // 全选/取消全选
      const onCheckAllChange = (e: any) => {
        const checked = e.target.checked;
        selectedValues.value = checked ? localFields.value.map((field) => field.value) : [];
        indeterminate.value = false;
        checkAll.value = checked;
      };

      // 选项组变化
      const onGroupChange = (checkedValues: string[]) => {
        selectedValues.value = checkedValues;
        updateCheckAllStatus();
      };

      // 取消
      const cancel = () => {
        updateSelectedValues();
        emit('update:visible', false);
      };

      // 保存
      const save = () => {
        const updatedFields = localFields.value.map((field) => ({
          ...field,
          selected: selectedValues.value.includes(field.value),
        }));
        if (!updatedFields || !updatedFields.some((item) => item.selected)) {
          createMessage.error('请至少选择一项！');
          return;
        }
        emit('save', updatedFields);
        emit('update:visible', false);
      };
      const handleShowFilter = () => {
        console.log('handleShowFilter');
      };
      return {
        localFields,
        selectedValues,
        indeterminate,
        checkAll,
        onCheckAllChange,
        onGroupChange,
        cancel,
        save,
        handleShowFilter,
      };
    },
  });
</script>

<style lang="less" scoped>
  .filter-body {
    display: flex;
    min-height: 400px;

    .filter-left {
      width: 500px;
      // padding: 8px 16px;
      border-right: 1px solid #f0f0f0;

      .filter-options {
        padding: 8px;
      }

      .checkbox-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px;

        .checkbox-item {
          min-width: 120px;
        }
      }
    }

    .filter-right {
      width: 300px;
      padding: 8px 0px;

      .current-selection {
        .selection-title {
          font-size: 14px;
          color: #1a253b;
          font-weight: 500;
          margin-bottom: 16px;
          padding-left: 16px;
        }
        .selection-name {
          color: #1a253b;
          padding: 8px 12px;
          background: #eaecf1;
        }
        .selected-fields {
          padding-left: 16px;
          .field-item {
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: 4px;
            transition: all 0.3s ease;

            &.disabled {
              opacity: 0.5;
              color: #999;
            }

            .field-name {
              color: #1a253b;
            }
            .icon-drag {
              object-fit: scale-down;
              margin-right: 15px;
            }
          }
        }
      }
    }
  }
</style>
